<template>
  <div class="sl_search__container">
    <div class="place" @click="onCurrentFn" :style="handlePlaceSly">
      <div class="city__name" v-if="!inputPlace">
        <span class="name">{{ currentCity }}</span>
        <icon type="icon-unfold" size="1"></icon>
      </div>
      <div class="city__select" v-else>
        <input type="text" placeholder="城市中文名或拼音" v-model="cityContext">
      </div>
    </div>
    <div class="search__cont" :style="handleSearchSly">
      <icon type="icon-sousuo" size="2"></icon>
      <input type="text" :placeholder="placeholder" @focus="searchFocusFn" v-model="areaContext">
    </div>
    <div class="search_close" @click="clickClose">取消</div>
  </div>
</template>

<script>
  export default {
    name: 'sl-search',
    data () {
      return {
        cityContext: '',
        areaContext: '',
      }
    },
    props: {
      placeholder: '',
      currentCity: '',
      inputPlace: {
        type: false,
        default: false
      },
    },
    computed: {
      handlePlaceSly () {
        let sly = {
          width: this.inputPlace ? '40%' : '20%'
        }
        return sly
      },
      handleSearchSly () {
        let sly = {
          width: this.inputPlace ? '40%' : '60%'
        }
        return sly
      }
    },
    methods: {
      clickClose () {
        this.$emit('clickClose')
      },
      // 派发选择当前地址事件
      onCurrentFn () {
        this.$emit('onCurrent', this.currentCity)
      },
      // 派发搜索焦点事件
      searchFocusFn () {
        this.$emit('searchFocus')
      }
    },
    watch: {
      cityContext () {
        this.$emit('cityChange', this.cityContext)
      },
      areaContext () {
        this.$emit('areaChange', this.areaContext)
      }
    }
  }
</script>

<style lang="stylus" type="text/stylus" scoped>
  @import "~assets/css/theme"

  .sl_search__container
    display flex
    justify-content space-between
    align-content center
    background #fff
    height 4 * .61rem
    .place
      width 30%
      line-height 2 * .61rem
      color $font_color_default
      border-right 1px #ddd solid
      font-size $sl_font_size_14
      transition all .5s
      .icon
        margin 0 .5 * .61rem
        color: $sl_font_color_desc_s
      .city__name
        height 100%
        font-size $sl_font_size_default
        display flex
        align-items center
        justify-content center
        padding-left 10px
        overflow hidden
        .name
          text-overflow ellipsis
          -webkit-line-clamp 1
          white-space nowrap
          overflow: hidden
      .city__select
        height 100%
        font-size $sl_font_size_default
        display flex
        align-items center
        padding-left 1 * .61rem
        input
          width 100%
          font-size $sl_font_size_default
          &::-webkit-input-placeholder
            color $sl_font_color_desc_s
    .search_close
      width 15%
      text-align right
      line-height 2 * .61rem
      font-size $sl_font_size_default
      border-left 1px #ddd solid
      color $sl_font_color_desc_s
      display flex
      justify-content center
      align-items center
    .search__cont
      width 50%
      display flex
      align-content center
      span
        color $sl_font_color_desc_s
        margin-right .5 * .61rem
        display flex !important
        align-items center
      input
        height 100%
        font-size $sl_font_size_default
        outline none
        &::placeholder
          color $sl_font_color_desc_s
</style>
